<template>
	<mu-container>
		<mu-list>
			<mu-list-item button :ripple="false">
				<mu-list-item-action title="个人中心">
					<mu-avatar>
						<img :src="photoPath" :onerror="errorImg">
					</mu-avatar>
				</mu-list-item-action>
				<mu-list-item-title>{{user.userName}}</mu-list-item-title>

			</mu-list-item>
			<mu-divider />
			<!-- <mu-list-item button :ripple="false">
				<mu-list-item-action title="关于">
					<mu-icon value="priority_high"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>关于</mu-list-item-title>
			</mu-list-item> -->
			<mu-list-item button :ripple="false" @click="openPhoto=true">
				<mu-list-item-action title="上传头像">
					<mu-icon value="cloud_upload"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>上传头像</mu-list-item-title>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="openAlert=true">
				<mu-list-item-action title="修改密码">
					<mu-icon value="lock_open"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>修改密码</mu-list-item-title>
			</mu-list-item>
			<mu-list-item button :ripple="false" @click="logout()">
				<mu-list-item-action title="退出">
					<mu-icon value="input"></mu-icon>
				</mu-list-item-action>
				<mu-list-item-title>退出</mu-list-item-title>
			</mu-list-item>
		</mu-list>
		<changePassword :openAlert="openAlert" v-on:openAlert="getOpenAlert"></changePassword>
		<uploadPhoto :openPhoto="openPhoto" v-on:getUser="getUser" v-on:openPhoto="getOpenPhoto"></uploadPhoto>
	</mu-container>
</template>

<script type="text/javascript">
	import changePassword from '../components/ChangePassword'
	import uploadPhoto from '../components/UploadPhoto'
	export default {
		components: {
			changePassword,
			uploadPhoto
		},
		data() {
			return {
				user: '',
				errorImg: 'this.src="' + require('../assets/default.png') + '"',
				openAlert:false,
				openPhoto:false,
				photoPath:''
			}
		},
		methods: {
			logout() {
				let self = this;
				self.$ajax.get("/logout")
					.then(function(res) {
						self.code = res.data.code;
						if (self.code == 200) {
							self.$toast.success('退出成功');

							localStorage.removeItem('user');
							//获取登录成功后要跳转的路由。
							self.$router.push({
								name: 'login'
							});
						}
					})
					.catch(function(err) {
						console.log(err);

					});
			},
			getOpenAlert(data){
				this.openAlert=data;
			},
			getOpenPhoto(data){
				this.openPhoto=data;
			},
			getUser(data){
				this.user=data;
				this.photoPath=this.$ajax.defaults.baseURL + '/user/showPhoto/' + this.user.photoUrl;
			}
		},
		mounted() {
			this.user = JSON.parse(localStorage.getItem('user'));
			this.photoPath=this.$ajax.defaults.baseURL + '/user/showPhoto/' + this.user.photoUrl;
		},
		
	}
</script>

<style>
</style>
